import React, { Component } from 'react'
import ctx from '@/assets/js/ctx'
import styles from './index.module.scss'
import ItemWarp from '@/components/ItemWarp'
import classnames from 'classnames'
import { Tabs, WhiteSpace, Carousel } from 'antd-mobile';


export class Home extends Component {
    static contextType = ctx

    constructor(){
        super()

        this.state = {
            tabs:[
                { title: '首页' },
                { title: '动画' },
                { title: '番剧' },
                { title: '国创' },
                { title: '音乐' },
                { title: '舞蹈' },
                { title: '科技' },
                { title: '影视' },
                { title: '直播' },
            ],
            swiperItems:[{
                id: 380229,
                name: "B站独家，全球同步播出",
                pic: "d63d4aa684f72f9baa704d7ad728045ccf1abeac.png",
                },
                {
                id: 380477,
                name: "赛博朋克背景故事详解",
                pic: "b6a1247b04c9c9a9b3e767e27f0cab90febeeb92.png",
                }],
            videoList:[]    
        }
    }

    reqVideoList = () => {
        this.context.axios.post('/bulubulu/api/video/list')
        .then(({code,msg,data}) => {
            if(code == 1){
                this.setState({
                    videoList:data
                })
            }else{
                console.log(msg)
            }
        })
    }

    toSearch = () => {
        this.props.history.push('/videoChannel')
    }

    render() {
        const {tabs,swiperItems,videoList} = this.state
        const {toSearch} = this
        return (
            <div className={styles.home}>
                <div className={styles.top}>
                    <img className={styles.userImg} src={require("@/assets/img/xiaodianshi.png")} alt="" />
                    <div className={styles.searchBar}>
                        <input type="text" className={styles.searchIpt} onClick={toSearch} />
                        <i className={classnames("iconfont","icon-faxianweixuanzhongxuanzhong",styles.searchIcon)}></i>
                    </div>
                    <i className={classnames("iconfont","icon-sixin",styles.message)}></i>
                </div>

                <WhiteSpace />
                    <Tabs 
                    tabBarActiveTextColor="#fb7299"
                    tabBarInactiveTextColor="#707070"
                    tabBarUnderlineStyle={{ border: "1px #fb7299 solid"}}
                    tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={5} />}>
                    </Tabs>
                <WhiteSpace />

                <div className={styles.swiper}>
                {
                    swiperItems.length != 0 
                    ? <Carousel 
                    autoplay infinite
                    dotActiveStyle={{backgroundColor:"#de698c"}}
                    >
                        {swiperItems.map(e => <img className={styles.swiperItems} key={e.id} src={require(`@/assets/img/${e.pic}`)} alt="no ressources" />)}                            
                    </Carousel>
                    : <div>请耐心等一下吧</div>
                }
                </div>

                <div className={styles.videoList}>
                    {videoList.map(e => <ItemWarp itemInfo={e} key={e._id} />)}
                </div>

            </div>
        )
    }

    componentDidMount(){
        this.reqVideoList()
    }
}

export default Home
